<template>
  <div class="status-complete">
    <t-card :bordered="false">
      <div class="content">
        <p class="status-img">
          <img src="@/assets/icon-success.png" alt="">
        </p>
        <h3>预审完成</h3>
        <p>等待代理商支付尾款</p>
        <div class="btns">
          <t-button theme="default" @click="$emit('back')">返回代理商列表</t-button>
          <t-button theme="primary">邀请进入企业微信</t-button>
        </div>
      </div>
    </t-card>
  </div>
</template>

<script>
export default {
  name: 'StatusComplete'
}
</script>

<style lang="less" scoped>
  .content {
    height: 73vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .status-img {
      width: 56px;
      height: 56px;
      flex-shrink: 0;
      margin-bottom: 24px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    h3 {
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
      text-align: center;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 8px;
    }

    p {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      text-align: center;
      color: rgba(0, 0, 0, 0.7);
    }

    .btns {
      padding-top: 32px;
      width: 280px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }
</style>
